<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>修改背景</title>
	<link rel="stylesheet" href="{$CSS}/bootstrap3.3.7.min.css">
	<link rel="stylesheet" href="/layui/css/layui.css">
	<style type="text/css">
		/*dao hang*/
		.public-header-nav{
		  background: #fff;
		  border-bottom: 1px solid #e6e6e6;
		  padding-top: 8px;
		  display: flex;
		  align-items: center;
		  padding-left: 0;
		  /*margin-right: 10px;*/
		  margin: 0;
		}
		.public-header-nav li{
		  line-height: 40px;
		  padding: 0 15px;
		  list-style: none;
		}
		.public-header-nav li a{
		  color: #333;
		  font-size: 14px;
		  border-bottom: 2px solid #fff;
		  text-decoration: none;
		}
		.public-header-nav-active{
		  color: #1E9FFF !important;
		  border-bottom: 2px solid #1E9FFF !important;
		}
		.public-header-nav-active a{
			color: #1E9FFF !important;
		}
		
		html{
			height: 100%;
		}
		body{
			height: 100%;
		}
		.friendPublish_container{
			height: 100%;
		}
		.friendPublish_content{
			height: 100%;
			/*position: relative;*/
			padding: 20px;
		}
		.friendPublish_submitButton_container{
			display: flex;
		}
		.friendPublish_submitButton_container button{
			outline: none;
			width: 120px;
			-webkit-appearance: none;
			background: #5076b8;
			border: none;
			font-size: 14px;
			color: #fff;
			border-radius: 5px;
			padding: 10px;
		}
		.public_tipSetting_contaienr{
			background: #e9e9e9;
			padding: 12px 0;
		}
		.public_tipSetting_content{
			display: flex;
			align-items: center;
			border: 1px solid #ffdda6;
			background: #fff2db;
			padding: 10px;
			margin: 0 20px;
		}
		.public_tipSetting_contaienr p{
			font-size: 14px;
			color: rgba(0,0,0,0.65);
		}
		.public_tipSetting_contaienr a{
			font-size: 14px;
			color: #1890ff;
		}
		.public_tipSetting_contaienr svg{
			margin-left: 5px;
			fill: #999;
			cursor: pointer;
		}
		.upLoadImg_container{
			display: flex;
			align-items: center;
		}
		.upLoadImg{
			width: 88px;
			height: 88px;
			margin: 10px 5px;
		}
	</style>
</head>
<body>
	<div class="friendPublish_container">
		<div class="friendPublish_content">
			上传背景图： 
			<div class="upLoadImg_container">
				<div class="public_formOther_container">
					<div class="layui-input-block" style="margin-left:0px;">
						<br>
						<img {if !$userBackground->background}onerror="this.style.display='none'" {/if} id="pic_miniprogram_pic" src="{$userBackground->background}"  style="width: 100px; height: 100px;">
						<input type="hidden" name="miniprogram_pic" id="miniprogram_pic" />
						<button type="button" class="layui-btn select_img" data-target="miniprogram_pic">
						  <i class="layui-icon">&#xe67c;</i>上传图片
						</button>
					</div>
				</div>
			</div>
			<br>
			<div class="friendPublish_submitButton_container">
				<button onclick="publish_video()">保存</button>
			</div>
		</div>
	</div>
</body>
</html>
<script src="/cdn/jquery.js"></script>
<script src="/layui/layui.all.js"></script>
<script src="/js/ajax.js"></script>
	<script>
		function publish_video(){
			var img = $('#pic_miniprogram_pic').attr("src");
			if(!img){
				tusi("请选择背景图片");
				return false;
			}
			myAjaxPost(false, true, '', { background:img}, function (resp) {
				if (resp.status == 'success'){
					layer.msg(resp.msg);
				}else{
					layer.msg(resp.msg);
				}
			});
		}
	</script>
	<script>
	$('.select_img').on('click',function  () {
	  	var targetId=this.getAttribute('data-target');
	  	layer.open({
			title:'图片库',
			type: 2,
			area: ['700px', '450px'],
			fixed: false, //不固定
			maxmin: false,
			content: '/imgLib/lib.html?type=vshop_img&target='+targetId
	  	});
	})

	window.uploadImgCallback=function (tgt,url) {
	  console.log('选择图片结果',tgt,url);
	  if(tgt=='image'){
		var inputEle=$('#image');
		var prevEle=$('#pic_image');
		inputEle.val(url);
		prevEle.attr('src',url);
		prevEle.show();
	  }else if(tgt=='link_pic'){
		var inputEle=$('#link_pic');
		var prevEle=$('#pic_link_pic');
		inputEle.val(url);
		prevEle.attr('src',url);
		prevEle.show();
	  }else if(tgt=='miniprogram_pic'){
		var inputEle=$('#miniprogram_pic');
		var prevEle=$('#pic_miniprogram_pic');
		inputEle.val(url);
		prevEle.attr('src',url);
		prevEle.show();
	  }
	};
	</script>